<template>
  <div class="mt-scroller" :style="styles">
    <div>
      <slot class="mt-scroller-list"></slot>
      <div class="mt-scroller-bottom">
        <div v-if="status===0 || status===1">
          <spinner type="ios" size="20px"></spinner>
          <span>正在加载</span>
        </div>
        <div v-if="status===2">
          <span>没有数据</span>
        </div>
        <div v-if="status===3">
          <span>错误</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Spinner } from "vux"

//iscroll实例
let myScroll

export default {
  data() {
    return {
      slotsElm: {},
      el: {},
      slotsHeight: 0,
      elScrollHeight: 0,
      elOffsetHeight: 0,
      elScrollTop: 0,
      scrollerBottom: {},
      bottomHeight: 0,
      status: 1, //0加载中，1加载完成, 2没有数据, 3错误
      scrollHeight: 0,
      abortPromise: ""
    }
  },
  mounted() {
    this.slotsElm = this.$slots.default[0].elm
    this.scrollerBottom = this.$el.querySelector(".mt-scroller-bottom")
    this.getHeights()
    this.load()
    this.$nextTick(() => {
      myScroll = new IScroll(".mt-scroller", { click: true })
      let self = this
      // myScroll.on("scroll", function(v) {
      //   // console.log(this)
      // })
      myScroll.on("scrollStart", function(v) {
        self.$emit('onScrollStart')
      })
      myScroll.on("scrollEnd", function(v) {
        self.$emit('onScrollEnd')
        self.scrollHeight = this.y
        self.load()
      })
    })
  },
  methods: {
    getHeights() {
      this.slotsHeight = this.slotsElm.scrollHeight
      this.elScrollHeight = this.$el.scrollHeight
      this.elOffsetHeight = this.$el.offsetHeight
      this.elScrollTop = this.$el.scrollTop
      this.bottomHeight = this.scrollerBottom.offsetHeight
    },
    load(force = false) {
      if (force) {
        this.emit()
        return
      }
      if (this.status === 0) {
        return
      }
      this.getHeights()
      if (
        this.elOffsetHeight + Math.abs(this.scrollHeight) >=
        this.elScrollHeight - this.bottomHeight
      ) {
        this.emit()
      }
    },
    emit() {
      this.status = 0
      //一般设置一个最低的延阻，以便让橡皮筋动画跑完
      // setTimeout(() => {
      this.$emit("loadEvent", { loaded: this.loaded, nodata: this.nodata })
      // }, 750)
    },
    loaded() {
      this.status = 1
      this.$nextTick(() => {
        myScroll.refresh()
      })
    },
    nodata() {
      this.status = 2
      this.$nextTick(() => {
        myScroll.refresh()
      })
    },
    refresh() {
      myScroll.scrollTo(0, 0)
      setTimeout(() => {
        this.load()
      }, 750)
    }
  },
  computed: {},
  props: {
    styles: String
  },
  components: {
    Spinner
  }
}
</script>

<style lang="scss">
.mt-scroller {
  position: fixed;
  // z-index: 9999;
  width: 100%;
  top: 86px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  background: #fff;
  font-size: 14px;
  color: #aaa;
  touch-action: none;
  // overflow:auto;

  .mt-scroller-bottom {
    height: 40px;
    line-height: 40px;
    background: #fff;
    text-align: center;

    .vux-spinner {
      vertical-align: sub;
    }
  }
}
</style>
